<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>定单打印</title>
    <script src="/jquery-1.8.3.min.js"></script>
    <script src="/printThis.js"></script>
    <script src="/chineseMoney.js"></script>
    <script src="/tools.js"></script>
    <link rel="stylesheet" href="/print.css"/>
</head>
<body>
<div id="receiptPrintArea0">
    <h3 style="text-align: center"><span id="companyName"></span></h3>
    <table width="100%">
        <tr>
            <td width="10%">客户</td><td width="23%"><span class="customerName"></span></td>
            <td width="10%">录单日期</td><td width="23%"><span class="eatDate"></span></td>
            <td width="10%">单据号</td><td width="23%"><span class="id"></span></td>
        </tr>
        <tr>
            <td width="10%">摘要</td><td width="23%"><span class="week"></span></td>
            <td width="10%">类型</td><td width="23%"><span class="mealsTypeName"></span></td>
            <td width="10%">配送日期</td><td width="23%"><span class="supplyDate"></span></td>
        </tr>
        <tr>
            <td width="10%">配送类型</td><td width="23%"><span class="supplyTypeName"></span></td>
            <td width="10%">配送线路</td><td width="23%"><span class="routerName"></span></td>
            <td width="10%">备注</td><td width="24%"><span class="remark"></span></td>
        </tr>
    </table>
    <table class="printTable" width="100%">
        <thead>
        <tr>
        <td width="6%">序号</td>
        <td width="16%">食材名称</td>
        <td width="15%">规格</td>
        <td width="15%">品牌</td>
        <td width="10%">单位</td>
        <td width="10%">单价</td>
        <td width="13%">数量</td>
        <td width="15%">金额</td>
        </tr>
        </thead>
        <tbody class="content">
        </tbody>
    </table>
    <table width="100%" class="printTable">
        <tr>
            <td width="25%">合计金额大写</td><td width="25%"><span class="chineseMoney"></span></td>
            <td width="25%">合计金额小写</td><td width="25%"><span class="amountOfMoney"></span></td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td width="33%">保管员</td>
            <td width="33%">送货员</td>
            <td width="33%">验收员</td>
        </tr>
    </table>
</div>
<script th:inline="javascript">
    var params = [[${params}]];
    var orderIds = params.ordersIds;
    var backAddress = params.backAddress;
    var remarks = params.remarks;

    $('#companyName').text(params.companyName);
    for (var i = 1 ; i < orderIds.length ; i++) {
        var node = $("#receiptPrintArea0").clone(true);
        node.attr("id","receiptPrintArea" + i);
        $('body').append(node);
    }
    function print(no) {
        $("#receiptPrintArea" + no).printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            pageTitle: "",
            removeInline: false,
            //printDelay: 333,
            header: null,
            formValues: true
        });
    }
    $.ajax({
            url: backAddress + "/api/order/printData",
            data : {
                ordersIds : orderIds,
                remarks : remarks
            },
            type: "post",
            dataType: "json",
            traditional : true,
            success: function (data) {
                //console.log(data)
                for (var k = 0 ; k < data.data.length ; k++){
                    $(".customerName")[k].innerText = data.data[k].customerName;
                    $(".eatDate")[k].innerText = data.data[k].eatDate;
                    $(".id")[k].innerText = data.data[k].id;
                    $(".mealsTypeName")[k].innerText = data.data[k].mealsTypeName;
                    $(".supplyDate")[k].innerText = data.data[k].supplyDate;
                    $(".supplyTypeName")[k].innerText = data.data[k].supplyTypeName ;
                    $(".routerName")[k].innerText = data.data[k].routerName ;
                    $(".amountOfMoney")[k].innerText = data.data[k].amountOfMoney ;
                    $(".chineseMoney")[k].innerText = Arabia_to_Chinese(data.data[k].amountOfMoney + '') ;
                    $(".week")[k].innerText = getWeek(data.data[k].eatDate) ;
                    $(".remark")[k].innerText = data.data[k].remark ;
                    var str = '' ;
                    for (var i = 0 ; i < data.data[k].detail.length ; i++) {
                        str += "<tr><td width=\"6%\">" + (i + 1) + "</td>" +
                            "<td width=\"16%\">" + data.data[k].detail[i].foodMaterialName + "</td>" +
                            "<td width=\"15%\">" + dealNull(data.data[k].detail[i].specs) + "</td>" +
                            "<td width=\"15%\">" + dealNull(data.data[k].detail[i].brand) + "</td>" +
                            "<td width=\"10%\">" + dealNull(data.data[k].detail[i].unitName) + "</td>" +
                            "<td width=\"10%\">" + data.data[k].detail[i].salePrice + "</td>" +
                            "<td width=\"13%\">" + data.data[k].detail[i].totalAmount + "</td>" +
                            "<td width=\"15%\">" + data.data[k].detail[i].total + "</td></tr>"
                    }
                    $(".content")[k].innerHTML = str;
                    print(k)
                }
            },
            error: function (status) {
                alert(status)
            }
        }
    )
</script>
</body>
</html>